<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>video demo</title>
  <link rel="stylesheet" href="./iconfont/font_2190064_ehdwdut0ec/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .video-box{
    margin: 0 auto;
  }
</style>
<body>
  <video id="video1" controls width="800" height="600"></video>
  <div style="height: 600px;"></div>
  <!-- <div onclick="shock()" style="width: 200px;height: 200px;background-color: red;color: #fff;">
    振动
  </div> -->
  <button onclick="removeVideo()">移出事件</button>
  <div class="video-box">
    <!-- 视频加载图标 -->
    <div class="video-loading"></div>
    <div class="video-mask">
      <i class="iconfont icon-bofang-copy" id="play-screen-btn"></i>
      <i class="iconfont icon-bofang" id="pause-screen-btn"></i>
    </div>
    <div class="video-wrap">
      <video id="video-player"></video>
    </div>
    <div class="video-control">
      <!-- 进度条模块 -->
      <div class="progress-contain">
        <!-- 进度点 -->
        <i class="progress-dot" id="progress-dot"></i>
        <div class="progress-line">
          <!-- 前进度条 -->
          <div class="prevPlay" id="prevPlay"></div>
          <!-- 加载的进度条 -->
          <div class="hasLoad"></div>
        </div>
      </div>
      <!-- 底部工具模块 -->
      <div class="bottom-tool">
        <!-- 左侧 -->
        <div class="tool-left">
          <div class="play-btn">
            <span class="video-play iconfont icon-bofang1" id="video-play"></span>
            <span class="video-play iconfont icon-bofang2" id="video-pause"></span>
          </div>
          <!-- 时间模块 -->
          <div class="time-contain">
            <span id="now-time"></span>
            /
            <span id="time-whole"></span>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="tool-right">
          <!-- 倍速模块 -->
          <div class="speed-contain">
            <div class="speed-list">
              <ul>
                <li data-val="2" class="speed-active">2.0x</li>
                <li data-val="1.5">1.5x</li>
                <li data-val="1.25">1.25x</li>
                <li data-val="1">1.0x</li>
                <li data-val="0.75">0.75x</li>
                <li data-val="0.5">0.5x</li>
              </ul>
            </div>
            <span class="speed-btn">倍速</span>
          </div>
          <!-- 声音模块 -->
          <div class="video-voice">
            <div class="voice-range">
              <div id="voice-val">100</div>
              <div class="voice-range-contain" id="voice-range-contain">
                <!-- 音量圆点 -->
                <span class="voice-dot" id="voice-dot"></span>
                <!-- 声音线 -->
                <div class="voice-line"></div>
                <!-- 蓝线 -->
                <div class="voice-has-line" id="voice-has-line"></div>
              </div>
            </div>
            <i class="video-icon iconfont icon-shengyin"></i>
          </div>
        </div>
      </div>
      
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="./js/index.js"></script>
<script>
  const mediaSource = new MediaSource();
  const mediaUrl = URL.createObjectURL(mediaSource);
  // document.getElementById('video1').src = mediaUrl
  document.getElementById('video1').src = "http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4"
  let videoPlayer = new VideoPlayer('.video-box',{
    // src: mediaUrl,
    src:"./js/video/tvc-cn.webm",
    volume:100,
    autoplay:true,
    muted:true
  })
  mediaSource.addEventListener("sourceopen",sourceOpen);
 async function sourceOpen(e){
    URL.revokeObjectURL(mediaUrl);
    // 设置 媒体的编码类型
    const mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const mediaSource = e.target;
    console.log('mediaSource打开',mediaSource);
    const sourceBuffer = mediaSource.addSourceBuffer(mime);
    sourceBuffer.addEventListener("updateend",(e)=>{
      // mediaSource.endOfStream();
      console.log('监听',sourceBuffer.updating,mediaSource.readyState);
        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
          console.log('关闭')
          mediaSource.endOfStream();
        }
    });
    sourceBuffer.addEventListener("error",(err)=>{
      console.log('错误',err);
    })
    try {
      const res = await getVideo();
      console.log('古德古德baby',res,sourceBuffer);
      // const uint8Array = new Uint8Array(res);
      // console.log(uint8Array)
      sourceBuffer.appendBuffer(res)
      // sourceBuffer.appendBuffer(res);
    } catch (error) {
      // console.log('错误===》》》',error)
    }
  }
  function getVideo(){
    return new Promise((resolve,reject)=>{
      axios.get('http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',{
        responseType:"arraybuffer"
      }).then((res)=>{
        console.log(res.data)
        resolve(res.data)
      }).catch((err)=>{
        console.log(err);
        reject(err)
      })
    })
  }


  videoPlayer.initVideo();
  function removeVideo(){
    videoPlayer.dispose_video()
  }
  function shock(){
    navigator.vibrate = navigator.vibrate
               || navigator.webkitVibrate
               || navigator.mozVibrate
               || navigator.msVibrate;

       if (navigator.vibrate) {
           // 支持
           console.log("支持设备震动！");
       }
        // alert("1111");
         navigator.vibrate([100, 200]);
  }
</script>
</body>
</html>